﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Easyui扩展库 Tabs - 落阳 整理</title>
    <link href="http://www.easyui-extlib.com/Content/Site.css" rel="stylesheet" />
    <script src="http://www.easyui-extlib.com/Scripts/jquery/jquery-1.11.0.min.js"></script>
    <script src="http://www.easyui-extlib.com/Scripts/jquery-extensions/jquery.jdirk.js"></script>
    <link href="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/themes/default/easyui.css" rel="stylesheet" />
    <link href="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/themes/icon.css" rel="stylesheet" />
    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>

    <link href="http://www.easyui-extlib.com/Scripts/jquery-easyui-extensions/base/jeasyui.extensions.base.css" rel="stylesheet" />
    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui-extensions/base/jeasyui.extensions.base.loading.js"></script>
    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui-extensions/messager/jeasyui.extensions.messager.progress.js"></script>

    <link href="http://www.easyui-extlib.com/Scripts/jquery-easyui-extensions/panel/jeasyui.extensions.panel.css" rel="stylesheet" />
    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui-extensions/panel/jeasyui.extensions.panel.iframe.js"></script>

    <script src="http://www.easyui-extlib.com/Scripts/jquery-easyui-extensions/tabs/jeasyui.extensions.tabs.operateTab.js"></script>
    <script>
        $(function () {
            $("#btnRefreshTab").click(function () {
                $("#tabs1").tabs("refresh", "标签页1");
            });

            $("#btnLoading").click(function () {
                $("#tabs1").tabs("loading");
            });

            $("#btnLoaded").click(function () {
                $("#tabs1").tabs("loaded");
            });

            $("#btnAddTab").click(function () {
                var title = "新的标签页", exist = $("#tabs1").tabs("exists", title);
                if (exist) { return; }
                $("#tabs1").tabs("add", {
                    title: title,
                    selected: false,
                    closable: true,
                    href: "PartailPage.html"
                });
            });

            $("#btnInserTab").click(function () {
                var title = "插入新的标签页", exist = $("#tabs1").tabs("exists", title);
                if (exist) { return; }
                $("#tabs1").tabs("insert", {
                    options: {
                        title: title,
                        selected: false,
                        closable: true,
                        href: "PartailPage.html"
                    },
                    which: "标签页1",
                    point: "after"
                });
            });

            $("#btnMoveTab").click(function () {
                $("#tabs1").tabs("move", {
                    target: "标签页2",
                    source: "标签页1",
                    point: "after"
                });
            });
        });
    </script>
</head>
<body>
    <div class="easyui-layout" data-options="fit:true">
        <div data-options="region:'north',border:false,title:'北部'" style="height:180px;border-bottom-width:1px;padding:25px;">
            <a id="btnRefreshTab" class="easyui-linkbutton" data-options="iconCls:'icon-add'">刷新标签页1</a>
            <a id="btnLoading" class="easyui-linkbutton" data-options="iconCls:'icon-add'">打开标签页1的遮罩层</a>
            <a id="btnLoaded" class="easyui-linkbutton" data-options="iconCls:'icon-add'">关闭标签页1的遮罩层</a>
            <a id="btnAddTab" class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加新的标签页</a>
            <a id="btnInserTab" class="easyui-linkbutton" data-options="iconCls:'icon-add'">在标签页1之后插入新的标签页</a>
            <a id="btnMoveTab" class="easyui-linkbutton" data-options="iconCls:'icon-add'">把标签页1移动到标签页2之后</a>
            <br /><br />
            自动嵌套iframe的标签页，其核心扩展由 jeasyui.extensions.panel.iframe.js 实现。因此要使 iniframe 属性生效，请引用相应的 js 及 css。
            <br />
            jeasyui.extensions.panel.iframe.js  jeasyui.extensions.panel.css
        </div>
        <div data-options="region:'center',border:false,title:'中间'">
            <div id="tabs1" class="easyui-tabs" data-options="fit:true,border:false">
                <div data-options="title:'标签页1',closable:false,selected:true,iconCls:'icon-add',href:'PartailPage.html'" style="padding:15px;">
                </div>
                <div data-options="title:'标签页2',closable:true,iconCls:'icon-edit'" style="padding:15px;">
                    标签页2
                </div>
                <div data-options="title:'自动嵌套iframe的标签页',closable:true,iconCls:'icon-edit',iniframe:true,href:'FullIndex.html'" style="padding:15px;">
                </div>
            </div>
        </div>
    </div>
</body>
</html>
